<script>

import axios from 'axios'
import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined, StarOutlined } from '@ant-design/icons-vue'
import { StarFilled } from '@element-plus/icons-vue'


export default {
  components: { StarFilled, DislikeOutlined, DislikeFilled, StarOutlined, LikeFilled, LikeOutlined },
  data() {
    return {
      url: '',
      m: '',
      lei: '',
      time: '',
      dat: '',
      zhu_y: '',
      dy: '',
      value: 0,
      z: '',
      c: '',
      likes: '',
      dislikes: '',
      action: '',
      actiona: false,
      acf: '收藏'
    }
  },
  methods: {
    dislike() {
      this.likes = 0
      this.dislikes = 1
      this.action = 'disliked'
      this.z = this.z + 1
    },
    like() {
      this.likes = 1
      this.dislikes = 0
      this.action = 'like'
      this.z = this.z + 1
    },
    sc(n) {
      if (n === 1) {
        this.acf = '收藏'
        this.actiona = false
        axios.get('/api/sc/removeSc', {
          params: {
            name: this.m
          },
          headers: {
            Authorization: localStorage.getItem('token')
          }
        })
      } else {
        let data = new FormData()
        data.append('name', this.m)
        data.append('url', this.url)
        axios.post('/api/sc/dys', data, {
          headers: {
            Authorization: localStorage.getItem('token')
          }
        })
        this.actiona = true
        this.acf = '不收藏'
      }
    },
    a() {
      const pa = this.$route.query.pa
      axios.get('/api/cx/getOneFile', {
        params: {
          name: pa
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then((response) => {
        this.b = true
        this.url = response.data.film.url
        this.m = response.data.film.name
        this.lei = response.data.film.lei
        this.time = response.data.film.time
        this.dat = response.data.film.date
        this.dy = response.data.film.director
        this.zhu_y = response.data.film.zhu
        const a = parseInt(response.data.film.zhang)
        const b = parseInt(response.data.film.chai)
        this.z = a
        this.c = b
        let c = 5.00 * a / (a + 1001)
        if (isNaN(c)) {
          this.value = 0.00
        } else {
          c = Math.round(c * 100) / 100
          this.value = c
        }
      })

      axios.get('/api/sc/getDysc', {
        params: {
          filme: pa
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then((response) => {
        const at = response.data.data
        if (at != null) {
          this.actiona = true
          this.acf = '不收藏'
        }
        if (at.zhan === '1') {
          this.likes = 1
          this.dislikes = 0
          this.action = 'like'
        } else if (at.zhan === '-1') {
          this.likes = 0
          this.dislikes = 1
          this.action = 'disliked'
        }
      })
    }
  },
  mounted() {
    this.a()

  }

}
</script>

<template>
  <div class="form">
    <div class="form_1">
      <div class="img">
        <img :src="url" alt="" width="100%" height="100%">
      </div>
    </div>
    <div class="form_2">
      <div class="form-ttb">
        <div class="m">{{ m }}</div>
        <div>类型：{{ lei }}</div>
        <div>电影时长：{{ time }}</div>
        <div>上映时间：{{ dat }}</div>
        <div>导演：{{ dy }}</div>
        <div style="white-space: normal;">主演：{{ zhu_y }}</div>

      </div>
    </div>
    <div class="form_3">
      <div class="form_31">
        <div style="padding-top: 4px;">评分：</div>
        <el-rate
          v-model="value"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value} 分"
        />
      </div>
      <div>获赞：{{ z }}</div>
      <div>获踩：{{ c }}</div>
      <div class="bc">


        <a-tooltip title="赞" class="basic">
          <div v-if="action === 'like'">
            <LikeFilled @click="like" />
          </div>
          <div v-else>
            <LikeOutlined @click="like" />
          </div>
        </a-tooltip>


        <a-tooltip title="踩" class="basic">
          <div v-if="action === 'disliked'">
            <DislikeFilled @click="dislike" />
          </div>
          <div v-else>
            <DislikeOutlined @click="dislike" />
          </div>
        </a-tooltip>
        <a-tooltip :title="acf" class="basic">
          <div v-if="actiona">
            <StarFilled style=";
            position: relative;
            right: 4px;
            top: -2px;" @click="sc(1)" />
          </div>
          <div v-else>
            <StarOutlined style="
            position: relative;
    bottom: 1px;" @click="sc(2)" />
          </div>
        </a-tooltip>

      </div>
    </div>


  </div>
</template>

<style scoped>
.basic {
  width: 25px;
  height: 25px;
  margin-right: 15px;

}

.bc {
  display: flex;
  width: 100%;
  height: 30px;
  margin-top: 15px;
}

.form_31 {
  text-align: center;
  display: flex;
  margin: 180px auto 0;
}

.form-ttb div {
  margin-top: 5px;
}

.m {
  text-align: justify;
  font-size: xx-large;
}

.form-ttb {
  padding-top: 7%;
  width: 100%;
  height: 80%;
}

.img {
  width: 70%;
  height: 70%;
  background-color: aliceblue;
  border-radius: 15px;
  margin: 55px auto 0;
  overflow: hidden;
}

.form {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
}

.form_1 {
  width: 25%;

}

.form_2 {
  width: 55%;
  padding-right: 50px;
}

.form_3 {
  width: 20%;
}
</style>